<template>
  <div class="manager-container">
    <!--    <van-sticky offset-top="0">-->
    <!--      <van-search-->
    <!--        v-model="xm"-->
    <!--        show-action-->
    <!--        shape="round"-->
    <!--        background="#017bd3"-->
    <!--        placeholder="请输入搜索关键词"-->
    <!--        @search="search"-->
    <!--        @clear="search"-->
    <!--      >-->
    <!--        <template #left>-->
    <!--          <van-icon name="arrow-left" @click="$router.go(-1)" size="18" color="white" style="margin-right: 10px"/>-->
    <!--        </template>-->
    <!--        <template #action>-->
    <!--          <div class="search-btn" @click="search">搜索</div>-->
    <!--        </template>-->
    <!--      </van-search>-->
    <!--    </van-sticky>-->
    <Header>
      <van-icon name="search" size="18" slot="right" @click="searchPopup=true"/>
    </Header>

    <div class="warpper">
      <div class="footer-container">
        <van-list v-model="loading" :offest="300" :finished="finished" finished-text="没有更多了" @load="onLoad"
                  :immediate-check="false">
          <van-cell v-for="(item,index) in list" :key="index" :title="item.chlx" @click="getDetail(item.id)">
            <template #title>
              <div class="examie-box">
                <div class="flex-center-between examie-title">
                  <p class="xm">{{ item.xm }}</p>
                  <van-tag v-if="item.shzt == '0'" type="warning">待审核</van-tag>
                  <van-tag v-else-if="item.shzt == '1'" type="success">审核通过</van-tag>
                  <van-tag v-else-if="item.shzt == '2'" type="danger">审核不通过</van-tag>
                  <van-tag v-else type="primary">未提交参会信息</van-tag>
                </div>
                <div>
                  <div class="lable-item">
                    <p><span class="label">人员类别：</span>{{ formart(item.chlx) }}</p>
                  </div>
                  <div class="lable-item">
                    <p><span class="label">手机号码：</span>{{ item.tel }}</p>
                  </div>
                  <div class="lable-item">
                    <p><span class="label">身份证：</span>{{ item.idcard|fkIdCard }}</p>
                    <!--                    <van-button size="mini" color="#7232dd" @click.stop="joinKbms(item.id,item.xm,'km')">加入开幕式-->
                    <!--                    </van-button>-->
                    <!--                    <van-button size="mini" color="#7232dd" @click.stop="joinKbms(item.id,item.xm,'bm')">加入闭幕式-->
                    <!--                    </van-button>-->
                  </div>
                </div>
              </div>

            </template>

          </van-cell>
        </van-list>
      </div>
      <!--      <div class="layout-footer">-->
      <!--        <div class="flex-center">-->
      <!--          <van-button class="flex-1 kb-btn" plain color="#7232dd" @click="showPopup('km')">-->
      <!--            开幕式名单({{ this.kmsJoinList.length }})-->
      <!--          </van-button>-->
      <!--          <van-button class="flex-1 kb-btn" plain color="#7232dd" @click="showPopup('bm')">-->
      <!--            闭幕式名单({{ this.bmsJoinList.length }})-->
      <!--          </van-button>-->

      <!--        </div>-->
      <!--      </div>-->
    </div>
    <!--    查询条件-->
    <van-popup v-model="searchPopup" position="top" :style="{ height: '50%' }">
      <Header title="搜索条件" :leftArrow="false"></Header>
      <van-form @submit="searchSubmit">
        <van-field readonly clickable name="chlx" v-model="searchInfo.chlx" v-show="false"/>
        <van-field readonly clickable name="shzt" v-model="searchInfo.shzt" v-show="false"/>
        <van-field label="姓名" name="xm" v-model="searchInfo.xm">
        </van-field>
        <van-field readonly clickable label="人员类别" name="chlxValue" v-model="searchInfo.chlxValue"
                   @click="showPickerCom('chlx','rylbArr')">
        </van-field>
        <van-field label="手机号码" name="tel" v-model="searchInfo.tel">
        </van-field>
        <van-field readonly clickable label="审核状态" name="shztValue" v-model="searchInfo.shztValue"
                   @click="showPickerCom('shzt','shzt')">
        </van-field>
        <div class="handler-btn">
          <van-button size="normal" native-type="submit" round type="danger" class="btn">搜索</van-button>
          <van-button size="normal" round type="info" native-type="button" @click.t.stop="resetFrom" class="btn">重置
          </van-button>
        </div>
      </van-form>
    </van-popup>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="pickerColumns"
        value-key="value"
        @confirm="pickerConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup v-model="kbmsShow" position="bottom" :style="{ height: '80%' }">
      <van-tabs sticky>
        <van-tab :title="notConfirmTitle">
          <van-list finished-text="没有更多了">
            <van-swipe-cell v-for="item in showList" :key="item.id">
              <van-cell :border="true" :title="item.xm"/>
              <template #right>
                <van-button square type="danger" text="删除" @click="delNotConfirm(item.id)"/>
              </template>
            </van-swipe-cell>
          </van-list>
          <van-button type="info" @click="confirmAdd" block v-show="this.showList.length >0">添加</van-button>
        </van-tab>

        <van-tab :title="confirmTitle">
          <van-list finished-text="没有更多了">
            <van-swipe-cell v-for="item in showConfirmList" :key="item.id">
              <van-cell :border="true" :title="item.xm"/>
              <template #right>
                <van-button square type="danger" text="删除" @click="delConfirm(item.id,item.xm)"/>
              </template>
            </van-swipe-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
import { loadMemberData } from 'api/personManager'
import { getSelfInfo } from '@/utils/tokenUtil'
import { chlxArray, shzt } from '@/utils/code'
import { desensitizedZjhm } from '@/utils/desensitized'
import { getRealArrData } from '@/utils/'
import { parseTime } from '@/utils/'

let pickerCol
export default {
  name: 'PersonManager',
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      pageSize: 15,
      pageNo: 1,
      totalCount: 0,
      rylbArr: [],
      bmsJoinList: [],
      kmsJoinList: [],
      kbmsShow: false,
      notConfirmTitle: '',
      confirmTitle: '',
      showList: [],
      showConfirmList: [],
      notConfirmContainer: null,
      kbmsType: null,
      searchPopup: false,
      searchInfo: {},
      showPicker: false,
      pickerColumns: []
    }
  },
  created() {
    this.rylbArr = getRealArrData(chlxArray, 'child')
  },
  mounted() {
    this.loadPersonsData()
    this.notConfirmContainer = this.$refs.notConfirmContainer
  },
  filters: {
    fkIdCard(val) {
      return desensitizedZjhm(val)
    }
  },
  computed: {
    formart() {
      return function(val) {
        return this.rylbArr.filter(item => item.key == val)[0].value
      }
    }
  },
  methods: {
    showPickerCom(col, arr) {
      pickerCol = col
      this.pickerColumns = arr == 'shzt' ? shzt : this.rylbArr
      this.showPicker = true
    },
    pickerConfirm(field) {
      this.searchInfo[pickerCol + 'Value'] = field.value
      this.searchInfo[pickerCol] = field.key
      this.showPicker = false
    },
    searchSubmit(data) {
      this.searchPopup = false
      this.pageNo = 1
      this.list = []
      this.loadPersonsData()
      this.searchInfo = data

    },
    resetFrom() {
      this.searchInfo = {}
    },
    confirmAdd() {
      this.$dialog.confirm({
        title: '名单确认',
        message: '是否确认添加？'
      }).then(_ => {

      }).catch(err => {

      })
    },
    delNotConfirm(id) {
      //删除未确认的名单
      this.showList = this.showList.filter(c => {
        if (c.id != id) {
          return true
        }
      })
      if ('km' == this.kbmsType) {
        this.kmsJoinList = this.showList
      }
      if ('bm' == this.kbmsType) {
        this.bmsJoinList = this.showList
      }
    },
    delConfirm(id, xm) {
      this.$dialog.confirm({
        title: '删除确认',
        message: '是否确认删除' + xm + '?'
      }).then(_ => {

      }).catch(err => {

      })
    },
    showPopup(type) {
      if ('km' == type) {
        this.kbmsShow = true
        this.notConfirmTitle = '开幕式待添加名单'
        this.confirmTitle = '开幕式已确认名单'
        this.showList = this.kmsJoinList
      }
      if ('bm' == type) {
        this.kbmsShow = true
        this.notConfirmTitle = '闭幕式待添加名单'
        this.confirmTitle = '闭幕式已确认名单'
        this.showList = this.bmsJoinList
      }
      this.kbmsType = type
      //后台加载已确认名单
      this.showConfirmList = this.loadKbmsData(type)
    },
    loadKbmsData(type) {
      let data = { type: type }
      //假装从后台拿到数据
      let arr = []
      arr.push({ id: this.list[5].id, xm: this.list[5].xm })
      arr.push({ id: this.list[6].id, xm: this.list[6].xm })
      arr.push({ id: this.list[7].id, xm: this.list[7].xm })
      return arr
    },
    joinKbms(id, xm, type) {
      if ('km' == type) {
        if (!this.contailInList(id, this.kmsJoinList)) {
          this.kmsJoinList.push({ id: id, xm: xm })
        }
      } else if ('bm' == type) {
        if (!this.contailInList(id, this.bmsJoinList)) {
          this.bmsJoinList.push({ id: id, xm: xm })
        }
      }
    },
    contailInList(id, list) {
      let arr = list.filter(c => {
        if (c.id == id) {
          return true
        }
      })
      if (arr.length == 0) {
        return false
      } else {
        return true
      }
    },
    onLoad() {
      console.log(this.pageNo)
      if (this.list.length < this.totalCount && this.pageNo != 1) {
        this.loadPersonsData()
      } else {
        this.finished = true
      }

    },
    loadPersonsData() {
      let self = getSelfInfo()
      let that = this
      let otherParam = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      if (self.hasOwnProperty('permission') && self.permission.BSTVIEWPERMIS == 'true') {
        let chlxArry = self.permission.PERMISSION.split(',')
        otherParam.chlxArry = chlxArry
      } else {
        otherParam.tdbh = self.tdbh
      }
      let param = Object.assign({}, this.searchInfo, otherParam)
      loadMemberData(param)
        .then(res => {
          let data = JSON.parse(res.data)
          that.pageNo = that.pageNo + 1
          let resultList = [...data.list]
          if (that.list.length == 0) {
            that.list = resultList
          } else {
            that.list = that.list.concat(resultList)
          }
          that.totalCount = data.totalCount
          this.finished = false
          that.loading = false
        })
    },
    getDetail(id) {
      let now = new Date()
      let nowFormat = parseTime(now, '{y}-{m}-{d}')
      // if (nowFormat === '2021-12-05') {
      //   this.$router.push({ name: 'UserInfo', query: { id: id } })
      // } else {
      //   this.$dialog.alert({
      //     message: '您好！参会报名功能正在维护，暂停使用。请于12月5日至8日再次登陆更新您的参会信息。如果您是选手，请于12月1日至4日登陆大赛官网填报参赛报名回执后，按期登陆本系统更新参会信息。谢谢！'
      //   })
      // }
      this.$router.push({ name: 'UserInfo', query: { id: id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-btn {
  color: white;
  font-size: 15px;
  margin: 0 10px;
}

.examie-box {
  .examie-title {
    display: flex;
    justify-content: space-between;

    .xm {
      font-size: 16px;
    }
  }

  .lable-item {
    font-size: 13px;
    color: #999999;

    .label {
      color: #666666;
    }
  }
}

.kb-btn {
  border-radius: 0;
  border-left: none;
  border-bottom: none;

  &:last-child {
    border-right: none;
  }
}

.handler-btn {
  margin: 20px 0;
  padding: 0 20px;
  display: flex;
  margin-left: -20px;

  .btn {
    flex: 1;
    margin-left: 20px;
  }

}
</style>
